/**
 * FORM 表单演示 - 二次处理输入值
 *
 */
import { Form, Button, Input } from "antd";

const App: React.FC = () => {
  //表单
  const [form] = Form.useForm();

  //二次处理
  const extract_input = (e: {
    target: { value: string } | null | undefined;
  }) => {
    // 如果传入的对象为 null 或 undefined，则直接返回空字符串
    if (!e?.target?.value) {
      return "";
    }
    let value = e.target.value;
    //仅保留数字
    let numbersOnly = value.match(/\d+/g)?.join("") ?? ""; // 使用可选链操作符和 nullish 合并操作符处理可能为 null 的情况
    return numbersOnly;
  };

  //打印表单内容
  const show = () => {
    console.log(form.getFieldsValue());
  };

  return (
    <Form
      form={form}
      name="d"
      autoComplete="off"
      style={{ maxWidth: 600 }}
      layout="vertical"
    >
      <Form.Item>
        <h1>二次处理输入的值</h1>
      </Form.Item>

      <Form.Item
        label="仅输入数字"
        name="input"
        getValueFromEvent={extract_input}
        extra={
          <>
            试试输入： <pre>6asd46f1fa4sdf</pre>
          </>
        }
      >
        <Input />
      </Form.Item>

      <Form.Item>
        <Button onClick={show}>打印表格</Button>
      </Form.Item>
    </Form>
  );
};

export default App;
